<template>
  <div class="container">
    <div class="condition">
      <div class="item" v-for="item in conditionList" :key="item.key">
        <h2>{{ item.label }}</h2>
        <div class="options">
          <div
            v-for="o in item.options"
            :key="o.id"
            :class="{ is__checked: formGroup[item.key] === o.id }"
            @click="
              formGroup[item.key] = o.id;
              request();
            "
          >
            {{ o.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="list">
      <el-skeleton :loading="loading">
        <cus-empty v-if="!dataset.length" />
        <template v-else>
          <div class="item" v-for="data in dataset" :key="data.id">
            <img src="/src/assets/course/paper-icon.png" alt="试卷" />
            <p>{{ data.title }}</p>
            <div class="actions">
              <a @click="preview(data)">预览</a>
              <el-button type="text" @click="addData(2, data)">加入</el-button>
            </div>
          </div>
          <el-pagination
            v-model:current-page="formGroup.current"
            v-model:page-size="formGroup.size"
            :total="formGroup.total"
            @current-change="request()"
            layout="prev, pager, next"
          />
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script lang="ts">
import { PropType, reactive, ref } from "vue";
import { useStore } from "vuex";
import $, { useState } from "$";
import { ElLoading } from "element-plus";
export default {
  props: {
    subjectCode: String,
    addData: Function as PropType<(id) => void>,
  },
  setup(props) {
    let [dataset, setDataset] = useState([]);
    let formGroup = reactive({
      type: null,
      year: null,
      gradeId: null,
      source: null,
      subjectId: props.subjectCode,
      current: 1,
      size: 10,
      total: 0,
    });

    let conditionList = ref([
      {
        label: "试卷类型",
        key: "type",
        options: [
          { name: "全部", id: null },
          { name: "标准试卷", id: 1 },
          { name: "我的试卷", id: 2 },
        ],
      },
      {
        label: "年份",
        key: "year",
        options: [],
      },
      {
        label: "年级",
        key: "gradeId",
        options: [],
      },
      {
        label: "来源",
        key: "source",
        options: [],
      },
    ]);
    $.http
      .post("/permission/user/userDataRules", {
        subjectCode: props.subjectCode,
        userId: useStore().getters.userInfo.user.id,
      })
      .then((res) => {
        conditionList.value[1].options = [
          { name: "全部", id: null },
          ...res.json.years,
        ];
        conditionList.value[2].options = [
          { name: "全部", id: null },
          ...res.json.grades,
        ];
      });
    $.http
      .post("/system/dictionary/queryDictByCodes", {
        typeCodesStr: "QUES_SOURCE",
      })
      .then(
        (res) =>
          (conditionList.value[3].options = [
            { name: "全部", id: null },
            ...res.json.QUES_SOURCE,
          ])
      );

    let [loading, setLoading] = useState(false);
    const request = async () => {
      setLoading(true);
      let res = await $.http.post("/tiku/paper/queryPaperPage", formGroup);
      setDataset(res.json.records);
      formGroup.total = res.json.total;
      formGroup.current = res.json.current;
      formGroup.size = res.json.size;
      setLoading(false);
    };
    request();

    const preview = (data) => {
      console.log(data)
      if (data.sourceFrom === 3) {
        const loading = ElLoading.service({
          lock: true,
          background: "rgba(255, 255, 255, .7)",
          text: "加载中...",
        });
        let src = `${$.utils.generatBasePath()}furl=${
          import.meta.env.VITE_APP_BASE_URL
        }${data.filePath}`;
        let closeBtn = $.element("div", {
          className: "el-icon-close",
          style: {
            width: "36px",
            height: "36px",
            lineHeight: "36px",
            textAlign: "center",
            background: "#fff",
            borderRadius: "50%",
            fontSize: "24px",
            position: "fixed",
            top: "40px",
            right: "40px",
            zIndex: "10",
            cursor: "pointer",
          },
          on: {
            click: () => {
              container.remove();
            },
          },
        });
        let iframe = $.element("iframe", {
          attrs: { src, width: "100%", height: "100%" },
          style: { background: "#f9f9f9" },
        });
        iframe.onload = loading.close;
        let container = $.element(
          "div",
          {
            style: {
              width: "100%",
              height: "100%",
              position: "absolute",
              top: "0",
              left: "0",
              zIndex: "3200",
            },
          },
          [closeBtn, iframe]
        );
        document.body.appendChild(container);
      } else {
        window.open(`./#/test-paper-edit/true/${data.id}`);
      }
    };

    return { dataset, formGroup, conditionList, request, loading, preview };
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex: 1 1 65px;
  padding: 17px 15px;
  .condition {
    width: 265px;
    margin-right: 15px;
    padding: 18px 0 18px 18px;
    border-radius: 4px;
    border: 1px solid #dcdee3;
    background: #f5f7fa;
    .item {
      &:not(:last-child) {
        margin-bottom: 16px;
      }
      .options {
        display: flex;
        flex-wrap: wrap;
        margin-top: 4px;
        & > div {
          height: 28px;
          padding: 0 12px;
          margin: 0 8px 8px 0;
          color: #6c6c6c;
          line-height: 28px;
          border-radius: 14px;
          cursor: pointer;
          &.is__checked {
            color: #fff;
            background: #faad14;
          }
        }
      }
    }
  }

  .list {
    flex: 1 1 265px;
    overflow: auto;
    .item {
      display: flex;
      padding: 12px 10px;
      border-radius: 4px;
      border: solid 1px #dcdee3;
      transition: all 0.25s;
      cursor: pointer;
      &:hover {
        background: #f5f7fa;
        border-color: #f5f7fa;
      }
      &:not(:last-child) {
        margin-bottom: 10px;
      }
      & > img {
        display: block;
        width: 42px;
        height: 42px;
        margin-right: 10px;
      }
      & > p {
        width: 240px;
        line-height: 42px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .actions {
        width: 70px;
        margin-left: auto;
        line-height: 42px;
        a {
          margin-right: 12px;
          color: #382a74;
        }
      }
    }
  }
}
</style>
